<template>
  <div id="squareInfo">
    <div class="close" @click="closeInfo" />
    <div class="title">{{ name || '' }}</div>
    <div class="lable">
      <div
        v-for="(item) in averageProps"
        :key="item.sort"
        class="item"
      >
        <div class="name" :title="item.name">{{ item.name }}</div>
        <div class="content">{{ item.value.toFixed(2) + item.unit }}</div>
      </div>
    </div>
  </div>
</template>

<script>

import { toRefs, computed, watch, reactive } from 'vue'

export default {
  props: {
    info: {
      type: Object,
      default: () => {}
    }
  },
  emits: ['close'],
  setup(props, { emit }) {
    const data = reactive({
      name: null,
      averageProps: []
    })

    watch(() => props.info, newVal => {
      data.name = newVal.name || null
      data.averageProps = newVal.averageProps || []
    })

    function closeInfo() {
      emit('close')
    }

    return {
      ...toRefs(data),
      closeInfo
    }
  }

}
</script>
<style lang="scss" scoped>
#squareInfo {
  background: url("@/assets/gis/squareInfoBg.png") no-repeat;
  background-size: 409px 333px;
  width: 409px;
  height: 333px;
  padding: 10px 20px;
  position: relative;
  .close {
    background: url("@/assets/gis/close@2x.png") no-repeat;
    background-size: 16px 16px;
    width: 16px;
    height: 16px;
    position: relative;
    color: white;
    font-size: 16px;
    top: 20px;
    left: 350px;
  }
  .title {
    background: url("@/assets/gis/squareTitle.png") no-repeat;
    background-size: 16px 16px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    line-height: 24px;
  }
  .lable {
    width: 360px;
    // height: 260px;
    overflow: auto;
    padding-top: 10px;
    .item {
      float: left;
      display: flex;
      width: 50%;
      .name {
        width: 66px;
        height: 33px;
        background: rgba(9, 109, 252, 0.3);
        border: 1px solid #0070c0;
        font-size: 10px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        line-height: 30px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap; /* nowrap:规定段落中的文本不进行换行   */
        overflow: hidden; /*超出部分隐藏*/
      }
      .content {
        width: 124px;
        // height: 33px;
        border: 1px solid #0070c0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #d2dceb;
        line-height: 24px;
      }
    }
  }
}
</style>
